<template>
  <div class="pay-attention">
    <nav>
      <ul>
        <router-link to="/twopage/twolist" tag="li" active-class="active">
            <span> 关注 </span>
            <div class="aa"></div>
        </router-link>


        <router-link to="/twopage/hotlist" tag="li" active-class="active">
            <span> 热门 </span>
            <div class="aa"></div>
        </router-link>

        
      </ul>
    </nav>

    <router-view style="width:100%; height:800px; overflow:auto;"></router-view>
    
    <!-- <div class="two-list"> -->
      <!-- <van-pull-refresh v-model="loading" @refresh="onRefresh" >
        <template #loading>
            正在加载中...
        </template>
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        > -->
          <!-- <twolist :list="list" v-show="path==='/topage/twolist'"></twolist> -->

        
        <!-- </van-list>
      </van-pull-refresh> -->
    <!-- </div> -->

    

    <div class="last">3333</div>

    
  </div>
</template>
<script>
import Vue from 'vue';
// import twolist from '../../components/twopage/homepage_active'
import {PullRefresh, List } from 'vant';

Vue.use(PullRefresh);
Vue.use(List);

export default{
  // components:{
  //   twolist
  //   },

    data() {
    return {
      list: [],
      loading: true,
      finished: false,
      refreshing: true,
    }
  },

  methods:{
    onRefresh(){
      console.log('refresh')
      setTimeout(()=>{
        console.log(this.finished)
        this.finished=true;
        this.loading = false;
      },2000)
    },

    onLoad(){
      console.log('load')
    },
  },

  created() {
    // 分页的初始化
    this.limit = 10 // 每页多少条
    this.offset = 0 // 起始index
    this.hasMore = true // 是否到底了
  },

}

</script>

<style lang='stylus' scoped>
@import '../../assets/stylus/border.styl';

.pay-attention {
  height: 100%;
  overflow: hidden;
  width: 100%;
  display-direction column 
  nav {
    height: 0.44rem;
    width: 100%;
    flex 1
    ul {
      height: 100%;
      border_1px(0 0 1px 0);
      display: flex;
      color: #666;

      li {
        line-height: 0.4rem;
        width: 0.77rem;
        text-align: center;
      }
    }
  }
  // .two-list{
  //   margin-top -.12rem
  // }
  .last{
    height .44rem
    flex 1
    }
}
      .active {
        font-size: 0.22rem;
        font-weight: 600;
        color: black;

        span {
          width: 0.40rem;
        }

        .aa {
          margin: auto;
          width: 0.3rem;
          height: 0.04rem;
          background-color: skyblue;
          border-radius: 2px;
        }
      }


</style>